<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>油卡管理系统</title>
  <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f4;
            padding: 20px;
        }
        .container {
            background: white;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            margin-bottom: 20px;
        }
        .hidden {
            display: none;
        }
        h2 {
            color: #333;
        }
        input, select, button {
            padding: 8px;
            margin-top: 5px;
            width: 300px;
        }
        table {
            width: 100%;
            margin-top: 20px;
            border-collapse: collapse;
        }
        th, td {
            text-align: left;
            padding: 8px;
            border-bottom: 1px solid #ddd;
        }
        .pagination {
            display: flex;
            justify-content: center;
            list-style: none;
            padding: 0;
        }
        .pagination li {
            cursor: pointer;
            padding: 5px;
        }
    </style>
</head>
<body>
<div class="container hidden" id="addCardForm">
  <h2>添加油卡</h2>
  <input id="cardNo" type="text" placeholder="卡号 (7-10位)" required>
  <input id="balance" type="text" placeholder="余额" required>
  <button onclick="addCard()">添加油卡</button>
  <button onclick="hideAddForm()">取消</button>
</div>

<div class="container" id="cardListContainer">
  <h2>油卡列表</h2>
  <table id="cardsTable">
    <thead>
    <tr>
      <th>ID</th>
      <th>卡号</th>
      <th>余额</th>
      <th>操作</th>
    </tr>
    </thead>
    <tbody>
    </tbody>
  </table>
  <ul class="pagination">
  </ul>
</div>

<button onclick="showAddForm()">添加新油卡</button>
<button id="returnHome" onclick="window.location.href='/oil-manage/'">返回首页</button> <!-- 添加返回首页按钮 -->

<script>
    const pageSize = 5; // 设置固定的每页显示数量

    function showAddForm() {
        document.getElementById('addCardForm').classList.remove('hidden');
        document.getElementById('cardListContainer').classList.add('hidden');
    }

    function hideAddForm() {
        document.getElementById('addCardForm').classList.add('hidden');
        document.getElementById('cardListContainer').classList.remove('hidden');
        fetchCards(1); // 刷新油卡列表
    }

    async function addCard() {
        const cardNo = document.getElementById('cardNo').value;
        const balance = document.getElementById('balance').value;

        const oilCard = {
            cardNo: cardNo,
            balance: parseFloat(balance)
        };

        try {
            const response = await fetch('/oil-manage/insertCard', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify(oilCard)
            });
            if (response.ok) {
                alert('油卡添加成功');
                hideAddForm(); // 添加成功后返回列表
            } else {
                const result = await response.json();
                alert('添加失败: ' + result.message);
            }
        } catch (error) {
            alert('Error: ' + error);
        }
    }

    async function deleteCard(id) {
        try {
            const response = await fetch('/oil-manage/CardDeleted?id=' + id, {
                method: 'POST'
            });
            if (response.ok) {
                alert('油卡删除成功');
                fetchCards(1); // 重新加载油卡列表，从第一页开始
            } else {
                const result = await response.json();
                alert('删除失败: ' + result.message);
            }
        } catch (error) {
            alert('Error: ' + error);
        }
    }

    async function fetchCards(pageNum) {
        try {
            const response = await fetch(`/oil-manage/getOilCard?pageNum=${pageNum}&pageSize=${pageSize}`);
            const result = await response.json();
            if (response.ok) {
                updateCardsTable(result.data.list);
                updatePagination(result.data.total, pageNum);
            } else {
                alert('获取列表失败: ' + result.message);
            }
        } catch (error) {
            alert('Error: ' + error);
        }
    }

    function updateCardsTable(cards) {
        const tbody = document.getElementById('cardsTable').getElementsByTagName('tbody')[0];
        tbody.innerHTML = '';
        cards.forEach(card => {
            let row = tbody.insertRow();
            row.insertCell().textContent = card.id;
            row.insertCell().textContent = card.cardNo;
            row.insertCell().textContent = card.balance;
            row.insertCell().innerHTML = `<button onclick="deleteCard(${card.id})">删除</button>`;
        });
    }

    function updatePagination(totalItems, currentPage) {
        const pages = Math.ceil(totalItems / pageSize);
        const paginationUl = document.querySelector('.pagination');
        paginationUl.innerHTML = '';

        for (let i = 1; i <= pages; i++) {
            let li = document.createElement('li');
            li.textContent = i;
            if (i === currentPage) li.style.fontWeight = 'bold';
            li.onclick = () => fetchCards(i);
            paginationUl.appendChild(li);
        }
    }

    // 默认调用一次第一页的数据
    fetchCards(1);
</script>
</body>
</html>